<template>
  <div style="position: fixed;z-index:100">
    <PopUp :popupOption="popupData"></PopUp>
    <div
      :style="{ 
        width:'600px', 
        background: '#fff',
        position:'fixed',
        right:'10px', 
        boxShadow: '0 1px 1px rgba(0, 0, 0, 0.05)',
        height: (contentHeight)+'px'
      }"
    >
      <a-row>
        <a-col>
          <div style="margin-bottom:5px; margin-top:10px; border:none;">
            <div class="panel-body" style="padding:0;">
              <div id="charts-r11">
                <a-row :gutter="10" style="padding:10px;">
                  <a-col :span="6">
                    <div class="panel panel-info b-light" style="margin:0;">
                      <div class="panel-heading p-v-xs p-h-sm">
                        <span class="pull-right"></span>
                        监控点总数
                      </div>
                      <div class="progress progress-xxxs no-margin no-radius bg-white">
                        <div class="progress-bar bg-light" style="width:80%"></div>
                      </div>
                      <div class="panel-body p-sm">
                        <div class="clear">
                          <div class="text-2x font-bold">{{totalPoint}}</div>
                          <small class="text-muted">截止至2019年04月</small>
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="panel panel-dark b-light" style="margin:0;">
                      <div class="panel-heading p-v-xs p-h-sm">
                        <span class="pull-right"></span>
                        烟尘排放超标
                      </div>
                      <div class="progress progress-xxxs no-margin no-radius bg-white">
                        <div class="progress-bar bg-light" style="width:80%"></div>
                      </div>
                      <div class="panel-body p-sm">
                        <div class="clear">
                          <div class="text-2x font-bold">
                            <a-popover placement="bottomLeft">
                              <template slot="content">
                                <a-table
                                  :columns="columns"
                                  :dataSource="dataYC"
                                  size="middle"
                                  rowKey="kid"
                                  :pagination="pagination"
                                >
                                  <a
                                    slot="actionRender"
                                    slot-scope="text,record"
                                    @click="monitorPointLocate(record.jcdbh)"
                                  >
                                    <i class="ti-location-pin"></i>
                                  </a>
                                </a-table>
                              </template>
                              <span>4</span>
                            </a-popover>
                          </div>
                          <small class="text-muted">2019年04月</small>
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="panel panel-warning b-light" style="margin:0;">
                      <div class="panel-heading p-v-xs p-h-sm">
                        <span class="pull-right"></span>
                        SO₂排放超标
                      </div>
                      <div class="progress progress-xxxs no-margin no-radius bg-white">
                        <div class="progress-bar bg-light" style="width:80%"></div>
                      </div>
                      <div class="panel-body p-sm">
                        <div class="clear">
                          <div class="text-2x font-bold">
                            <a-popover placement="bottomLeft">
                              <template slot="content">
                                <a-table
                                  :columns="columns"
                                  :dataSource="dataSO"
                                  size="middle"
                                  rowKey="kid"
                                  :pagination="pagination"
                                >
                                  <a
                                    slot="actionRender"
                                    slot-scope="text,record"
                                    @click="monitorPointLocate(record.jcdbh)"
                                  >
                                    <i class="ti-location-pin"></i>
                                  </a>
                                </a-table>
                              </template>
                              <span>6</span>
                            </a-popover>
                          </div>
                          <small class="text-muted">2019年04月</small>
                        </div>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="6">
                    <div class="panel panel-primary b-light" style="margin:0;">
                      <div class="panel-heading p-v-xs p-h-sm">
                        <span class="pull-right"></span>
                        NOx排放超标
                      </div>
                      <div class="progress progress-xxxs no-margin no-radius bg-white">
                        <div class="progress-bar bg-light" style="width:80%"></div>
                      </div>
                      <div class="panel-body p-sm">
                        <div class="clear">
                          <div class="text-2x font-bold">
                            <a-popover placement="bottomLeft">
                              <template slot="content">
                                <a-table
                                  :columns="columns"
                                  :dataSource="dataNO"
                                  size="middle"
                                  rowKey="kid"
                                  :pagination="pagination"
                                >
                                  <a
                                    slot="actionRender"
                                    slot-scope="text,record"
                                    @click="monitorPointLocate(record.jcdbh)"
                                  >
                                    <i class="ti-location-pin"></i>
                                  </a>
                                </a-table>
                              </template>
                              <span>5</span>
                            </a-popover>
                          </div>
                          <small class="text-muted">2019年04月</small>
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="10">
        <!-- <a-col :span="12">
          <div class="panel panel-info no-border" style="margin-bottom:10px; margin-top:5px;">
            <div class="panel-heading">
              <span>排放超标监控点位数量统计</span>
              <a-popover placement="leftTop" trigger="click">
                <template slot="content">
                  <div style="width:600px;">
                    <a-row :gutter="16">
                      <a-col :span="8">
                        <div class="panel panel-primary" style="margin-bottom:0;">
                          <div class="panel-heading">烟尘</div>
                          <div class="panel-body" style="padding:5px;">
                            <form
                              name="forma"
                              class="form-horizontal form-validation ng-pristine ng-invalid ng-invalid-required"
                            >
                              <div
                                class="panel panel-default"
                                style="border:none; margin-bottom:0;"
                              >
                                <div class="panel-body" style="padding:5px;">
                                  <a-row style="margin-bottom:5px;">
                                    <a-col :span="16">超标&nbsp;&gt;=</a-col>
                                    <a-col :span="8">
                                      <a-input size="small" v-model="ndConfig.yc.first"/>
                                    </a-col>
                                  </a-row>
                                  <a-row>
                                    <a-col :span="16">严重超标&nbsp;&gt;=</a-col>
                                    <a-col :span="8">
                                      <a-input size="small" v-model="ndConfig.yc.second"/>
                                    </a-col>
                                  </a-row>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                      </a-col>
                      <a-col :span="8">
                        <div class="panel panel-primary" style="margin-bottom:0;">
                          <div class="panel-heading">SO₂</div>
                          <div class="panel-body" style="padding:5px;">
                            <form
                              name="forma"
                              class="form-horizontal form-validation ng-pristine ng-invalid ng-invalid-required"
                            >
                              <div
                                class="panel panel-default"
                                style="border:none; margin-bottom:0;"
                              >
                                <div class="panel-body" style="padding:5px;">
                                  <a-row style="margin-bottom:5px;">
                                    <a-col :span="16">超标&nbsp;&gt;=</a-col>
                                    <a-col :span="8">
                                      <a-input size="small" v-model="ndConfig.so.first"/>
                                    </a-col>
                                  </a-row>
                                  <a-row>
                                    <a-col :span="16">严重超标&nbsp;&gt;=</a-col>
                                    <a-col :span="8">
                                      <a-input size="small" v-model="ndConfig.so.second"/>
                                    </a-col>
                                  </a-row>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                      </a-col>
                      <a-col :span="8">
                        <div class="panel panel-primary" style="margin-bottom:0;">
                          <div class="panel-heading">NOx</div>
                          <div class="panel-body" style="padding:5px;">
                            <form
                              name="forma"
                              class="form-horizontal form-validation ng-pristine ng-invalid ng-invalid-required"
                            >
                              <div
                                class="panel panel-default"
                                style="border:none; margin-bottom:0;"
                              >
                                <div class="panel-body" style="padding:5px;">
                                  <a-row style="margin-bottom:5px;">
                                    <a-col :span="16">超标&nbsp;&gt;=</a-col>
                                    <a-col :span="8">
                                      <a-input size="small" v-model="ndConfig.no.first"/>
                                    </a-col>
                                  </a-row>
                                  <a-row>
                                    <a-col :span="16">严重超标&nbsp;&gt;=</a-col>
                                    <a-col :span="8">
                                      <a-input size="small" v-model="ndConfig.no.second"/>
                                    </a-col>
                                  </a-row>
                                </div>
                              </div>
                            </form>
                          </div>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </template>
                <span slot="title">
                  <a-icon type="setting"/>&nbsp;&nbsp;污染物排放标准配置
                  <a-button
                    type="primary"
                    size="small"
                    style="float:right;"
                    @click="updateR2Charts"
                  >更新</a-button>
                </span>
                <a-button type="primary" icon="setting" size="small" style="float:right;">污染物排放标准配置</a-button>
              </a-popover>
            </div>
            <div class="panel-body">
              <div id="charts-r21" :style="{height:(chartsrHeight)+'px'}"></div>
            </div>
          </div>
        </a-col>-->
        <a-col :span="24">
          <div class="panel panel-info no-border" style="margin-bottom:10px; margin-top:5px;">
            <div class="panel-heading">
              <span>监控点污染物排放浓度统计</span>
            </div>
            <div class="panel-body">
              <div id="charts-r31" :style="{height:(chartsrHeight)+'px'}"></div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import * as mapOper from '../../scripts/mapOper.js';
import PopUp from '../dataView/PopUp';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');

//var _object = require('lodash/fp/object');
export default {
  name: 'R10301',
  computed: {
    ...mapGetters(['map', 'contentHeight'])
  },
  data() {
    function showTotalFn(total) {
      return `总数：${total} `;
    }
    return {
      visablestyle: { display: 'none' },
      //传递到弹窗组件中的数据
      popupData: {},
      chartsrHeight: 400,
      //radio默认选中的值
      r2radioValue: 'rmonth',
      //当前选中的监测点id
      currentJCD: '',
      r3Charts: null,
      r2Charts: null,
      //服务器保存在本地的数据
      r2LocalData: null,
      r3LocalData: null,
      optionr2: {
        baseOption: {
          color: ['#4bb622', '#f88311', '#ec4567', '#2772ee'],
          timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 1000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: []
          },
          title: {
            subtext: '来自大数据统计',
            left: 10
          },
          tooltip: {},
          legend: {
            right: 10,
            top: 22,
            data: []
          },
          calculable: true,
          grid: {
            top: 120,
            left: 75,
            right: 75,
            bottom: 90,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function(params) {
                    return params.value.replace('\n', '');
                  }
                }
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              data: ['烟尘', 'SO₂', 'NOx']
              // splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '个数'
            }
          ],
          series: [
            { name: '合理', type: 'bar' },
            { name: '超标', type: 'bar' },
            { name: '严重超标', type: 'bar' },
            { name: '无监测记录', type: 'bar' }
          ]
        },
        options: []
      },
      optionr3: {
        baseOption: {
          color: ['#4bb622', '#f88311', '#ec4567', '#2772ee'],
          timeline: {
            axisType: 'category',
            autoPlay: true,
            playInterval: 1000,
            data: [],
            bottom: 50
          },
          title: {
            subtext: '来自大数据统计',
            left: 10
          },
          tooltip: {},
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100
            },
            {
              start: 0,
              end: 100,
              handleIcon:
                'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            }
          ],
          legend: {
            right: 10,
            top: 22,
            data: []
          },
          calculable: true,
          grid: {
            top: 100,
            left: 75,
            right: 25,
            bottom: 120,
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
                label: {
                  show: true,
                  formatter: function(params) {
                    return params.value.replace('\n', '');
                  }
                }
              }
            }
          },
          xAxis: [
            {
              show: false,
              silent: true,
              splitArea: {
                show: false
              },
              type: 'category',
              axisLabel: { interval: 0 },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '浓度（mg/m³）'
            }
          ],
          series: [
            { name: '烟尘', type: 'bar' },
            { name: 'SO₂', type: 'bar' },
            { name: 'NOx', type: 'bar' }
          ]
        },
        options: []
      },
      //------------added by cjw from 2019/04/15-------------
      leftTableData: [],
      qyList: null,
      qyIdList: [],
      detailsShow: 'hidden',
      searchExpandBtnIcon: 'search', // double-left
      searchSelectShow: false,
      searchText: '',
      searchInput: null,
      columns: [
        {
          title: '排污口名称',
          dataIndex: 'qypwk',
          key: 'qypwk',
          align: 'center'
        },
        {
          title: '企业名称',
          dataIndex: 'qyname',
          key: 'qyname',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 65,
          align: 'center',
          scopedSlots: {
            customRender: 'actionRender'
          }
        }
      ],
      pagination: {
        size: 'small',
        defaultCurrent: 1,
        defaultPageSize: 5,
        pageSize: 5,
        showTotal: showTotalFn
      },
      timeline: [],
      ndConfig: {
        yc: {
          first: 500,
          second: 1000
        },
        so: {
          first: 500,
          second: 1000
        },
        no: {
          first: 500,
          second: 1000
        }
      },
      totalPoint: 0,
      dataYC: [],
      dataSO: [],
      dataNO: []
    };
  },
  mounted() {
    /**
     * 设置图表高度
     */
    this.chartsrHeight = this.contentHeight - 260;
    this.detailsShow = 'visibility';

    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });

      var container = document.getElementById('popup');
      let markerSetting = {
        map: this.map,
        element: container
      };
      let markerMap = mapOper.addMarker(markerSetting);
      this.changeMap({ map: markerMap });
      //加载污染源wfs图层
      let params = {
        this: this,
        url:
          config.baseMapUrl +
          'wuhai-wfsmap?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&TYPENAME=qy_jcd_gk36&OUTPUTFORMAT=json',
        successFunc: response => {
          let that = this;
          //过滤监控点信息
          this.qyList = response.data.features;
          that.dataYC = [
            that.qyList[40].properties,
            that.qyList[44].properties,
            that.qyList[58].properties,
            that.qyList[12].properties
          ];
          that.dataSO = [
            that.qyList[41].properties,
            that.qyList[46].properties,
            that.qyList[11].properties,
            that.qyList[16].properties,
            that.qyList[21].properties,
            that.qyList[26].properties
          ];
          that.dataNO = [
            that.qyList[42].properties,
            that.qyList[48].properties,
            that.qyList[14].properties,
            that.qyList[20].properties,
            that.qyList[26].properties
          ];
          let f_features = _.uniqBy(response.data.features, function(item) {
            return item.geometry.coordinates[0];
          });
          let array = [];
          this.qyList.forEach(e => {
            array.push(e.properties);
          });
          this.leftTableData = array;
          this.updateAllCharts();
          let jsonFeature = {
            type: 'FeatureCollection',
            name: 'qy_jcd_gk36',
            features: f_features
          };
          let style = mapOper.getGeoJsonStyle('qyjcd');
          let wfsParams = {
            map: this.map,
            jsonData: jsonFeature,
            style: style,
            styleFunc: function(feature) {
              style.getText().setText(feature.get('qypwk'));
              return style;
            },
            selectFunc: function(e) {
              if (e.target.getFeatures().getLength() == 1) {
                let feature = e.target.getFeatures().item(0);
                console.log(feature + '--' + feature.get('qypwk'));

                let popset = {
                  map: that.map,
                  //container:container,
                  coordinate: feature.getGeometry().flatCoordinates
                };
                that.popupData = {
                  display: 'block',
                  contentType: 'qy_jcd',
                  Title: feature.get('qypwk'),
                  QyName: feature.get('qyname'),
                  YjLl: feature.get('ll').substring(0, 4),
                  YqWd: feature.get('yqwd').substring(0, 4),
                  PfkGd: feature.get('pfkgd'),
                  YcGd: feature.get('ycgd'),
                  CykMj: feature.get('cykmj'),
                  YcCs: feature.get('yccs'),
                  PykZj: feature.get('pykzj').substring(0, 4),
                  PfBz: feature.get('pfbz')
                };
                mapOper.showPopUp(popset);
                let zoomparams = {
                  map: that.map,
                  center: [
                    feature.getGeometry().flatCoordinates[0] + 1300,
                    feature.getGeometry().flatCoordinates[1] - 500
                  ],
                  zoom: 8
                };
                mapOper.ZoomAndCenter(zoomparams);
                // that.currentJCD = feature.get('jcdbh');
                that.monitorPointLocate(feature.get('jcdbh'));
                //that.visablestyle.display='block';
                //更新右侧图表
                that.updateAllCharts();
              } else {
                that.popupData = { display: 'none' };
                that.currentJCD = '';
                //更新右侧图表
                that.updateAllCharts();
                //that.visablestyle.display='none';
              }
            }
          };
          let wfsmap = mapOper.loadWFSLayer(wfsParams);
          this.changeMap({ map: wfsmap });

          let overlayParams = {
            map: this.map,
            jsonData: response.data
          };
          let overlaymap = mapOper.loadOverlay(overlayParams);
          this.changeMap({ map: overlaymap });
        },
        failFunc: response => {
          console.log(response);
        }
      };
      commonOper.HttpGet(params);
    } else {
      this.$router.push({
        //核心语句
        path: 'R101.html' //跳转的路径
      });
    }
  },
  created() {
    // this.lazyLoad('');
  },
  methods: {
    //更新右侧图表
    updateAllCharts() {
      this.reloadR2Charts();
    },
    renderItem(params, api) {
      var xValue = api.value(0);
      var currentSeriesIndices = api.currentSeriesIndices();
      var barLayout = api.barLayout({
        barGap: '30%',
        barCategoryGap: '20%',
        count: currentSeriesIndices.length - 1
      });

      var points = [];
      for (var i = 0; i < currentSeriesIndices.length; i++) {
        var seriesIndex = currentSeriesIndices[i];
        if (seriesIndex !== params.seriesIndex) {
          var point = api.coord([xValue, api.value(seriesIndex)]);
          point[0] += barLayout[i - 1].offsetCenter;
          point[1] -= 20;
          points.push(point);
        }
      }
      var style = api.style({
        stroke: api.visual('color'),
        fill: null
      });

      return {
        type: 'polyline',
        shape: {
          points: points
        },
        style: style
      };
    },
    //更新图表2
    reloadR2Charts() {
      let that = this;
      if (that.r2LocalData === null) {
        // let chartDiv2 = document.getElementById('charts-r21');
        // that.r2Charts = that.$echarts.init(chartDiv2);
        // that.r2Charts.showLoading();
        let chartDiv3 = document.getElementById('charts-r31');
        that.r3Charts = that.$echarts.init(chartDiv3);
        that.r3Charts.showLoading();
        if (that.qyIdList.length === 0) {
          let idArray = [];
          _.forEach(that.qyList, function(e) {
            idArray.push(e.properties.jcdbh);
          });
          that.qyIdList = _.uniq(idArray);
        }
        that.totalPoint = that.qyIdList.length;
        let params = {
          this: that,
          data: that.qyIdList,
          url: config.webapiUrl + '/qyjcdrecord/getStaticRecordByJcdID',
          successFunc: function(request) {
            that.r2LocalData = request.data.data;
            //that.updateR2Charts(that.r2LocalData);
            that.updateR3Charts(that.r2LocalData);
          },
          failFunc: function(err) {
            console.log(err);
            that.r2Charts.hideLoading();
          }
        };
        commonOper.HttpPost(params);
      } else {
        //that.updateR2Charts(that.r2LocalData);
        that.updateR3Charts(that.r2LocalData);
      }
    },
    updateR2Charts(chartData) {
      let that = this;
      let timeArray = [],
        tempTimeArray = [];
      if (that.r2radioValue === 'rmonth') {
        _.forEach(chartData, function(e) {
          tempTimeArray.push(e.jcyear + '-' + e.jcmoonth);
        });
      } else {
        _.forEach(that.chartData, function(e) {
          tempTimeArray.push(e.jcyear);
        });
      }
      timeArray = _.uniq(tempTimeArray);
      let xAxisData = ['烟尘', 'SO₂', 'NOx'];
      let legendData = ['合理', '超标', '严重超标', '无监测记录'];
      that.optionr2.baseOption.timeline.data = timeArray;
      that.optionr2.baseOption.legend.data = legendData;
      that.optionr2.baseOption.xAxis[0].data = xAxisData;
      that.timeline = timeArray;
      let dataMap = {};
      let firstData = {};
      let secondData = {};
      let thirdData = {};
      let noData = {};
      let totalNumber = that.qyIdList.length;
      _.forEach(timeArray, function(e) {
        firstData[e] = [];
        secondData[e] = [];
        thirdData[e] = [];
        noData[e] = [];
        if (that.r2radioValue == 'rmonth') {
          let filterParams = {
            jcyear: parseInt(e.split('-')[0]),
            jcmoonth: parseInt(e.split('-')[1])
          };
          let targetArray = _.filter(chartData, filterParams);
          let firstCountYC = 0,
            secondCountYC = 0,
            thirdCountYC = 0,
            firstCountSO = 0,
            secondCountSO = 0,
            thirdCountSO = 0,
            firstCountNO = 0,
            secondCountNO = 0,
            thirdCountNO = 0,
            noDataLength = totalNumber - targetArray.length;

          _.forEach(targetArray, function(item) {
            if (item.ycnd < that.ndConfig.yc.first) {
              firstCountYC += 1;
            } else if (item.ycnd < that.ndConfig.yc.second) {
              secondCountYC += 1;
            } else {
              thirdCountYC += 1;
            }

            if (item.sond < that.ndConfig.so.first) {
              firstCountSO += 1;
            } else if (item.sond < that.ndConfig.so.second) {
              secondCountSO += 1;
            } else {
              thirdCountSO += 1;
            }

            if (item.nond < that.ndConfig.no.first) {
              firstCountNO += 1;
            } else if (item.nond < that.ndConfig.no.second) {
              secondCountNO += 1;
            } else {
              thirdCountNO += 1;
            }
          });
          firstData[e] = [firstCountYC, firstCountSO, firstCountNO];
          secondData[e] = [secondCountYC, secondCountSO, secondCountNO];
          thirdData[e] = [thirdCountYC, thirdCountSO, thirdCountNO];
          noData[e] = [noDataLength, noDataLength, noDataLength];
        } else {
          // let filterParams = {
          //   jcyear: parseInt(e)
          // };
          // let ycYearNd = 0,
          //   soYearNd = 0,
          //   noYearNd = 0;
          // _.forEach(_.filter(chartData, filterParams), function(it) {
          //   ycYearNd += it.ycnd;
          //   soYearNd += it.sotwond;
          //   noYearNd += it.nond;
          // });
          // ycData[e].push(ycYearNd);
          // soData[e].push(soYearNd);
          // noData[e].push(noYearNd);
        }
      });
      dataMap.dataFirst = that.dataFormatter(firstData, xAxisData);
      dataMap.dataSecond = that.dataFormatter(secondData, xAxisData);
      dataMap.dataThird = that.dataFormatter(thirdData, xAxisData);
      dataMap.dataNO = that.dataFormatter(noData, xAxisData);
      let opts = [];
      _.forEach(timeArray, function(item) {
        let op = {
          title: {
            text:
              ((item + '').length > 4
                ? (item + '').split('-')[0] +
                  '年' +
                  (item + '').split('-')[1] +
                  '月'
                : item + '年') + '数据',
            subtext: '来自大数据统计'
          },
          series: [
            { data: dataMap.dataFirst[item] },
            { data: dataMap.dataSecond[item] },
            { data: dataMap.dataThird[item] },
            { data: dataMap.dataNO[item] }
          ]
        };
        opts.push(op);
      });
      that.optionr2.options = opts;
      that.r2Charts.setOption(that.optionr2);
      that.r2Charts.hideLoading();
      window.onresize = that.r2Charts;
    },
    //更新图表3
    updateR3Charts(chartData) {
      let that = this;

      let timeArray = [],
        tempTimeArray = [];
      if (that.r2radioValue === 'rmonth') {
        _.forEach(chartData, function(e) {
          tempTimeArray.push(e.jcyear + '-' + e.jcmoonth);
        });
      } else {
        _.forEach(that.chartData, function(e) {
          tempTimeArray.push(e.jcyear);
        });
      }
      timeArray = _.uniq(tempTimeArray);

      let xAxisData = [];
      _.forEach(that.qyList, function(e) {
        xAxisData.push(e.properties.qyname + e.properties.qypwk);
      });
      let legendData = ['烟尘', 'SO₂', 'NOx'];
      that.optionr3.baseOption.timeline.data = timeArray;
      that.optionr3.baseOption.legend.data = legendData;
      that.optionr3.baseOption.xAxis[0].data = xAxisData;
      that.timeline = timeArray;

      let dataMap = {};
      let ycData = {};
      let soData = {};
      let noData = {};
      _.forEach(timeArray, function(e) {
        ycData[e] = [];
        soData[e] = [];
        noData[e] = [];
        if (that.r2radioValue == 'rmonth') {
          let filterParams = {
            jcyear: parseInt(e.split('-')[0]),
            jcmoonth: parseInt(e.split('-')[1])
          };
          let targetArray = _.filter(chartData, filterParams);
          _.forEach(that.qyIdList, function(qyId) {
            let obj = _.find(targetArray, { jcdbh: qyId });
            ycData[e].push(obj ? obj.ycnd : 0);
            soData[e].push(obj ? obj.sotwond : 0);
            noData[e].push(obj ? obj.nond : 0);
          });
        }
      });
      dataMap.dataYC = that.dataFormatter(ycData, xAxisData);
      dataMap.dataSO = that.dataFormatter(soData, xAxisData);
      dataMap.dataNO = that.dataFormatter(noData, xAxisData);
      let opts = [];
      _.forEach(timeArray, function(item) {
        let op = {
          title: {
            text:
              ((item + '').length > 4
                ? (item + '').split('-')[0] +
                  '年' +
                  (item + '').split('-')[1] +
                  '月'
                : item + '年') + '数据',
            subtext: '来自大数据统计'
          },
          series: [
            { data: dataMap.dataYC[item] },
            { data: dataMap.dataSO[item] },
            { data: dataMap.dataNO[item] }
          ]
        };
        opts.push(op);
      });
      that.optionr3.options = opts;

      that.r3Charts.setOption(that.optionr3);
      that.r3Charts.hideLoading();
      window.onresize = that.r3Charts;
    },
    lazyLoad() {
      setTimeout(() => {
        this.updateAllCharts();
      }, 500);
    },
    dataFormatter(obj, list) {
      var pList = list;
      var temp;
      // for (var year = 2002; year <= 2011; year++) {
      for (var j = 0, len = this.timeline.length; j < len; j++) {
        var year = this.timeline[j];
        var max = 0;
        var sum = 0;
        temp = obj[year];
        for (var i = 0, l = temp.length; i < l; i++) {
          max = Math.max(max, temp[i]);
          sum += temp[i];
          obj[year][i] = {
            name: pList[i],
            value: temp[i]
          };
        }
        obj[year + 'max'] = Math.floor(max / 100) * 100;
        obj[year + 'sum'] = sum;
      }
      return obj;
    },
    r2radioChange(e) {
      this.r2radioValue = e.target.value;
      this.reloadR2Charts();
    },
    // ----------added by cjw------------------
    handleSearch(selectedKeys, confirm) {
      confirm();
      this.searchText = selectedKeys[0];
    },
    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
    },
    toggleSearchSelect() {
      this.searchSelectShow = !this.searchSelectShow;
      this.searchExpandBtnIcon = this.searchSelectShow
        ? 'double-left'
        : 'search';
    },
    monitorPointLocate(jcdbh) {
      let that = this;
      // that.currentJCD = jcdbh;
      let currentObj = _.find(that.qyList, function(o) {
        return o.properties.jcdbh == jcdbh;
      });
      let param = {
        this: that,
        url:
          config.webapiUrl +
          '/qyjcdrecord/getLatestJcdRecordByID?jcdbh=' +
          jcdbh,
        successFunc: function(response) {
          if (response.status === 200 && response.data.data) {
            that.detailsShow = 'visible';

            let popset = {
              map: that.map,
              coordinate: currentObj.geometry.coordinates
            };
            that.popupData = {
              display: 'block',
              contentType: 'qy_jcd',
              Title: currentObj.properties.qypwk,
              QyName: currentObj.properties.qyname,
              YjLl: currentObj.properties.ll.substring(0, 4),
              YqWd: currentObj.properties.yqwd.substring(0, 4),
              PfkGd: currentObj.properties.pfkgd,
              YcGd: currentObj.properties.ycgd,
              CykMj: currentObj.properties.cykmj,
              YcCs: currentObj.properties.yccs,
              PykZj: currentObj.properties.pykzj.substring(0, 4),
              PfBz: currentObj.properties.pfbz
            };
            mapOper.showPopUp(popset);
            let zoomparams = {
              map: that.map,
              center: [
                currentObj.geometry.coordinates[0] + 1300,
                currentObj.geometry.coordinates[1] - 500
              ],
              zoom: 8
            };
            mapOper.ZoomAndCenter(zoomparams);
          } else {
            // let params = {
            //   this: that,
            //   title: '提示',
            //   message:
            //     '暂无' +
            //     currentObj.properties.qyname +
            //     currentObj.properties.qypwk +
            //     '最新污染物排放数据！',
            //   type: 'warning'
            // };
            // commonOper.Notification(params);
          }
        },
        failFunc: function(response) {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    ...mapActions(['changeMap'])
  },
  components: {
    PopUp
  }
};
</script>
<style>
@-webkit-keyframes warn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-moz-keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@-o-keyframes warn {
  0% {
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes warn {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.area-box .dot {
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #f90;
  opacity: 1;
  filter: alpha(opacity=100);
}
.area-box .pulse {
  position: absolute;
  top: -28px;
  left: -28px;
  height: 66px;
  width: 66px;
  border: 2px solid #f90;
  -webkit-border-radius: 48px;
  -moz-border-radius: 48px;
  border-radius: 48px;
  -webkit-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  -moz-box-shadow: 0 0 4px #82878f, 0 0 10px #82878f inset;
  box-shadow: 0 0 4px #f90, 0 0 10px #f90 inset;
  opacity: 0.12;
  filter: alpha(opacity=0);
  -webkit-animation: warn 2s ease-out both;
  -moz-animation: warn 2s ease-out both;
  -o-animation: warn 2s ease-out both;
  animation: warn 2s ease-out both;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background: 0 0;
}
.area-box .delay-1 {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
.area-box .delay-2 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.area-box .delay-3 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.area-box .delay-4 {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.area-box .delay-5 {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.area-box .delay-6 {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
.area-box .delay-7 {
  -webkit-animation-delay: 2.4s;
  -moz-animation-delay: 2.4s;
  -o-animation-delay: 2.4s;
  animation-delay: 2.4s;
}
.area-box .delay-8 {
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.area-box .delay-9 {
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.area-box .delay-10 {
  -webkit-animation-delay: -1.2s;
  -moz-animation-delay: -1.2s;
  -o-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.area-box .delay-11 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
/* ---------added by cjw from 2019/04/15 ↓--------------- */
#select-left-bar {
  width: 500px;
  position: absolute;
  top: 100px;
  left: 10px;
  background: transparent;
}

.cjw-control button:hover,
.ol-control button:focus {
  text-decoration: none;
  background-color: rgba(0, 60, 136, 0.7);
}

.cjw-control button {
  display: inline-block;
  margin: 1px;
  padding: 0;
  color: white;
  font-size: 1.14em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: 0.4em;
  background-color: rgba(0, 60, 136, 0.5);
  border: none;
  border-radius: 2px;
}

.search-select .info-enter-active,
.search-select .info-leave-active {
  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1.5);
}

.search-select .info-enter,
.search-select .info-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.custom-filter-dropdown {
  padding: 8px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.highlight {
  background-color: rgb(255, 192, 105);
  padding: 0px;
}

.search-select .ant-card-body {
  padding: 0;
}

#charts-r1 .ant-card-grid {
  padding: 10px 24px;
}

.right-slide-enter,
.right-slide-leave-active {
  transform: translateX(540px);
}

.right-slide-leave-active,
.right-slide-enter-active {
  transition: all 0.3s;
}
</style>

